<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30" v-if="list.length > 0">
			<view class="d-flex d-col-top">
				<u-image :src="info.court_pic" radius="10rpx" width="154rpx" height="154rpx"></u-image>
				<view class="d-flex-1 d-m-l-20">
					<view class="d-font-28">{{ info.venue_name }}</view>
					<view class="d-font-24 d-be d-m-t-10">{{ info.court_name }}</view>
				</view>
			</view>

			<view class="d-flex d-flex-wrap">
				<view class="d-text-center sels d-m-t-30" v-for="(item, index) in selectTimeList" :key="index">
					<view class="d-font-24 d-flex d-row-center h">{{ item.date }}</view>
					<view class="d-font-24 d-flex d-row-center b">
						<view>
							<view>{{ item.field_name }}</view>
							<view>{{ item.start_time }}-{{ item.end_time }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="d-font-28 d-p-t-30">
				<view>预约人员</view>
				<view>
					<radio-group active-color="#59A0FF" size="40rpx" placement="column" @change='change1'>
						<label class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-for="(item,index) in Listpay"
							:key="index">
							<u-image src="/static/card.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28">{{item.name}}</view>
							<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
								style="transform:scale(0.8)" />
						</label>
					</radio-group>
				</view>
			</view> -->
			<view class="d-font-28 d-p-t-30">
				<view>预约方式</view>
				<view>
					<u-radio-group v-model="paytype" active-color="#59A0FF" size="40rpx" placement="column">
						<!-- <view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(1)">
							<u-image src="/static/card.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '1'">{{ payList[1] }}</view>
							<u-radio name="1"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(2)">
							<u-image src="/static/count.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '2'">
								<text>{{ payList[2] }}</text>
								<text class="d-red">{{ count }}</text>
							</view>
							<u-radio name="2"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom"
							v-if="hasPay(5) && multifunctional_card_count > 0">
							<u-image src="/static/count.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '5'">{{ payList[5] }}</view>
							<u-radio name="5"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30" v-if="hasPay(3)">
							<u-image src="/static/wx.png" width="40rpx" height="35rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '3'">{{ payList[3] }}</view>
							<u-radio name="3"></u-radio>
						</view> -->
						<view class="d-flex d-p-t-30 d-p-b-30" v-if="hasPay(0)">
							<u-image src="/static/wx.png" width="40rpx" height="35rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '0'">{{ payList[0] }}</view>
							<u-radio name="0"></u-radio>
						</view>
					</u-radio-group>
				</view>
			</view>
		</view>

		<d-agent :show="show.agent" title="用户须知" :content="info.user_instruction"
			@confirm="show.agent = false"></d-agent>
		<d-mode :show="show.confirm" :content="'确定预约？'"
			@cancel="show.confirm = false" @confirm="confirm"></d-mode>
		<d-mode-cancel :show="show.cancel" content="是否放弃本次预约？" @cancel="cancelPay" @confirm="confirm"></d-mode-cancel>

		<u-popup @touchmove.stop :show="consultant" @close="closeAmount2" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup">
				<view class="store-popup">
					<view class="title flex-between">
						<text>预约人员</text>
						<u-icon @click="closetant" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
					</view>
					<scroll-view class="scroll-view_H" scroll-y="true" :scroll-top="scrollTop">
						<view>
							<radio-group active-color="#59A0FF" size="40rpx" placement="column" @change='change2'>
								<label class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-for="(item,index) in List_pay":key="index">
									<!-- <u-image :src="item.member_photo" width="40rpx" height="40rpx"></u-image> -->
									<u-avatar size="60rpx" :src="item.member_photo"></u-avatar>
									<view class="d-m-l-20 d-flex-1 d-font-28">{{item.member_name}}</view>
									<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
										style="transform:scale(0.8)" />
								</label>
							</radio-group>
						</view>
					</scroll-view>
					<u-button type="primary" shape="circle" :custom-style="{
							height: '80rpx',
							width: '80vw',
							fontSize: '30rpx',
							background: '#59A0FF'
						}" @click="okSubmit">
						确定
					</u-button>
				</view>

			</view>
		</u-popup>

		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<view class="d-flex">
					<u-checkbox-group size="24rpx" v-model="agent" shape="circle" active-color="#59A0FF">
						<u-checkbox label="我已同意和接受" name="ok" label-size="25rpx" label-color="#999999"></u-checkbox>
					</u-checkbox-group>
					<text class="d-font-24" @click="show.agent = true">《用户须知》</text>
					<text class="d-font-24">的全部内容</text>
				</view>
				<view class="d-m-t-30 d-flex">
					<view class="d-flex-1 d-font-30">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red">{{ totalPrice }}</text>
					</view>
					<view>
						<u-button type="primary" shape="circle" :custom-style="{
								height: '80rpx',
								width: '240rpx',
								fontSize: '30rpx',
								background: '#59A0FF'
							}" @click="afterSubmit">
							提交订单
						</u-button>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import {
		getCourtProduct,
		payList,
		createOrder,mList
	} from '@/common/api';
	export default {
		data() {
			return {
				list: [],
				info: {},
				show: {
					agent: false,
					confirm: false,
					cancel: false
				},
				payList: [],
				count: 0,
				multifunctional_card_count: 0,
				paytype: '0',
				agent: ['ok'],
				Listpay: [{
						name: '自己',
						type: '8',
						id: '8'
					},
					{
						name: '他人',
						type: '9',
						id: '9'
					}
				],
				consultant: false,
				List_pay:[],
				payChoose: {},
				member_type:'',
				member_id:''
			};
		},
		onLoad(e) {
			console.log(e,'222')
			this.id = e.id;
			this.member_id = e.member_id;
			this.member_type = e.member_type;
			this.selectTimeList = uni.getStorageSync('selectTimeList');
			this.show.agent = true
		},
		onBackPress(e) {
			if (e.from === 'backbutton') {
				this.show.cancel = true;
				return true;
			}
		},
		computed: {
			totalPrice() {
				let total = this.selectTimeList.reduce((total, item) => {
					return Number(total) + Number(item.time_price);
				}, 0);
				return total.toFixed(2);
			}
		},
		methods: {
			okSubmit(){
				this.consultant = false;
				
				let pay_id = this.List_pay[0].member_id
				this.payChoose = this.List_pay[0]
				for (let i = 0; i < this.List_pay.length; i++) {
					if (this.List_pay[i].checked) {
						pay_id = this.List_pay[i].member_id
						this.payChoose = this.List_pay[i]
						break
					}
				}
				// this.member_type = 3
				console.log(this.payChoose,'【【【【')
			},
			closeAmount2() {
				this.consultant = false;
			},
			closetant() {
				this.consultant = false
				this.list_items = []
				this.xiaoshou = true
			},
			change1(e) {
				if (e.detail.value == 1) {
					this.consultant = true
					// this.familyData()
				} else{
					this.payChoose = ''
					this.member_type = ''
					this.consultant = false
				}

			},
			change2(e) {
				let that = this
				let i = e.detail.value
				const item = this.List_pay[i]
				if (item) {
					this.payChoose = item
					this.List_pay[i].checked = true
				} else {
					this.payChoose = {}
				}
			},
			familyData() {
				mList()
					.then(res => {
						this.List_pay = res;
					})
			},
			getData() {
				payList().then(res => {
					this.payList = res.list;
					this.count = res.free_count;
					this.multifunctional_card_count = res.multifunctional_card_count;
				});
				getCourtProduct({
						params: {
							product_id: this.id
						}
					})
					.then(res => {
						this.$refs.paging.complete([res.result]);
						this.info = res.result;
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			getPayName(name) {
				if (name) {
					return name.replace(/[:\s]/g, '');
				}
				return name;
			},
			hasPay(pay_type) {
				return this.payList[pay_type] ? true : false;
			},
			afterSubmit() {
				if (!this.agent.length) {
					return uni.$u.toast('请阅读并同意《用户须知》');
				}
				this.show.confirm = true;
			},
			confirm() {
				this.show.confirm = false;
				this.show.cancel = false;
				uni.showLoading({
					title: '订单提交中...',
					mask: true
				});
				let data = {};
				data.price_ids = this.selectTimeList.map(item => item.price_id).join(',');
				data.time_ids = this.selectTimeList.map(item => item.time_id).join(',');
				data.field_ids = this.selectTimeList.map(item => item.field_id).join(',');
				data.price = this.selectTimeList.map(item => item.time_price).join(',');
				data.court_id = this.id;
				data.meal_id = this.selectTimeList[0].meal_id;
				data.field_type = this.selectTimeList[0].field_type;
				data = JSON.stringify(data);
				createOrder({
					goods_id: this.id,
					order_type: 3,
					pay_way: this.paytype,
					other_param: data,
					choose_date: this.selectTimeList[0].org_date,
					member_id:this.member_id,
					member_type:this.member_type
				}).then(res => {
					if (this.paytype != 3) {
						uni.$u.toast('预约成功');
					}
					setTimeout(() => {
						if (this.paytype != 3) {
							uni.$u.route({
								url: '/pages/mine/view',
								type: 'redirectTo'
							});
						} else {
							// 预约宝、微信
							// 说的跳转url
							window.location.href = res.pay_url;
						}
					}, 2000);
				});
			},
			cancelPay() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff4105;
	}

	.d-bold {
		font-weight: bold;
	}

	.minus,
	.plus {
		width: 38rpx;
		height: 38rpx;
		background: #f3f3f3;
	}

	.input {
		width: 64rpx;
		font-size: 28rpx;
	}

	.d-notice {
		background-color: #f6f6f6;
		margin: 0 -30rpx;
	}

	.d-main {
		color: #59a0ff;
	}

	.d-66 {
		color: #666;
	}

	.sels {
		width: 186rpx;
		min-width: 186rpx;
		height: 127rpx;
		background: #f3f3f3;
		border-radius: 10rpx;
		margin-right: 30rpx;
		position: relative;

		.close {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: -18rpx;
			top: -18rpx;
		}

		.h {
			height: 34rpx;
			background: #59a0ff;
			border-radius: 10rpx 10rpx 0 0;
			color: #fff;
		}

		.b {
			height: 83rpx;
		}
	}
	.store-popup {
		padding: 20rpx 0;

		.title {
			padding: 0px 30rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #cccccc;
			font-weight: bold;
	
			.clo {
				color: #2f75fa;
			}
		}
	
		.scroll-view_H {
			height: 50vh;
			overflow: auto;
			padding-bottom: 30rpx;
	
			.list-12 {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap; //自动换行
				justify-content: center;
				align-items: center;
	
	
				.item-coach {
					margin-top: 30rpx;
					height: 100rpx;
					padding: 0px 0rpx;
					overflow: hidden;
					background: #ffeae9;
					width: 30%;
					border-radius: 9px 9px 9px 9px;
					align-items: center;
					justify-content: center;
					position: relative;
					margin-left: 0.8%;
					text-align: center;
					line-height: 100rpx;
	
					.price {
						font-size: 26rpx;
						font-weight: 500;
						color: #ff1c1c;
						justify-content: center;
	
					}
	
					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;
	
						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}
	
						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}
	
						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}
		}

	
		.btn {
			padding: 0px 30rpx;
			margin-top: 20rpx;
		}
	}
</style>